<template>
    <div class="container">
        <h1>欧立业教育</h1>
        <div class="row">
            <div class="service" @click="open">
                <i class="fas fa-laptop-code"></i>
                <h2>托育早教</h2>
                <p>
                    Early childhood education.
                </p>
            </div>
            <div class="service" @click="open">
                <i class="fas fa-chart-line"></i>
                <h2>幼儿园课程</h2>
                <p>kindergarten curriculum.</p>
            </div>
            <div class="service" @click="dianji()">
                <i class="fab fa-sketch"></i>
                <h2>幼小衔接</h2>
                <p>transition from kindergarten to primary school.</p>
            </div>
            <div class="service" @click="open">
                <i class="fas fa-database"></i>
                <h2>语言素养</h2>
                <p>Language literacy.</p>
            </div>
            <div class="service" @click="open">
                <i class="fas fa-laptop-code"></i>
                <h2>AI素养</h2>
                <p>AI Accomplishment.</p>
            </div>
            <div class="service" @click="open">
                <i class="fas fa-laptop-code"></i>
                <h2>中高考培优</h2>
                <p>High school entrance examination training excellent.</p>
            </div>
        </div>
    </div>
</template>

<script >

export default {
    methods: {
        dianji() {
            console.log('点击了')
            this.$router.push('/login');

        },
        open() {
            this.$message('暂未开发');
        },
    }
}


</script>

<style scoped>
/* 导入在线字体库，嫌麻烦的可以跳过，不影响 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 如果没有导入在线字体库，这边就不用写了 */
    font-family: 'Poppins', sans-serif;
}

.container {
    width: 100%;
    height: 100%;
    padding: 0px 8%;
    background-image: url();
}

.container h1 {
    text-align: center;
    padding-top: 10%;
    margin-bottom: 60px;
    font-weight: 600;
    position: relative;
}

.container h1::after {
    content: '';
    background: #303ef7;
    width: 100px;
    height: 5px;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.row {
    display: grid;
    /* display: flex; */
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    grid-gap: 30px;
}

.service {
    text-align: center;
    padding: 25px 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    background: transparent;
    transition: transform 0.5s, background 0.5s;
}

.service i {
    font-size: 40px;
    margin-bottom: 10px;
    color: #303ef7;
}

.service h2 {
    font-weight: 600;
    margin-bottom: 8px;
}

.service:hover {
    background: #303ef7;
    color: #fff;
    transform: scale(1.05);
}

.service:hover i {
    color: #fff;
}
</style>